<template>
  <div>
    <div class="outer-box">
      <div class="sort-content" :style="{height:inHeight+'px'}">
        <div style="margin: 20px 24px 0px 24px;">
          <!-- 新增主类 -->
          <div class="individual-opta" style="margin-bottom: 10px;">
            <div class="opta-form">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="code">
                  <el-input v-model="form.code" placeholder="特性编码" :disabled="codeShow==false"></el-input>
                </el-form-item>
                <el-form-item prop="name">
                  <el-input v-model="form.name" placeholder="特性名称"></el-input>
                </el-form-item>
              </el-form>
              <el-button size="mini" type="primary" @click="submitFrom('form')" v-if="btnChange=='addParentStatus'">
                确定</el-button>
              <el-button size="mini" type="primary" @click="submitFrom('form',treeNode)"
                v-if="btnChange=='addChildStatus'">
                确定</el-button>
              <el-button size="mini" v-hasPermi="['inv:sort:add']" type="success" @click="submitFrom('form',treeNode)"
                v-if="btnChange=='updateParentStatus'">保存</el-button>
                <el-button size="mini" v-hasPermi="['inv:sort:edit']" type="success" @click="submitFrom('form',treeNode)"
                  v-if="btnChange=='updateChildStatus'">保存</el-button>
            </div>
          </div>
          <!-- 物料特性数据 -->
          <div class="height-tree individual-tree" :style="{height:(inHeight - 160)+'px'}">
            <el-tree :data="individualTree" :highlight-current="isIndividualHeight" :props="defaultProps"
              ref="individualTree" @node-click="nodeClick" v-loading="loading">
              <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%"
                @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                <div class="chang-mourse">
                  <div class="inal-input">
                    <span
                      class="inal-a"><span><span>{{data.code}}</span></span> - </span><span><span>{{node.label}}</span></span>
                  </div>
                  <span class="mou-r">
                    <el-link v-if="data.individualShow&&data.children!==undefined" size="mini" type="primary"
                      icon="el-icon-plus" @click.stop="handleAddChild(node)">
                    </el-link>
                    <el-link v-hasPermi="['inv:sort:edit']" v-if="data.individualShow" size="mini"
                      style="color: #67c23a;" type="primary" icon="el-icon-edit" @click.stop="updateIndividual(node)">
                    </el-link>
                    <el-link v-hasPermi="['inv:sort:remove']" v-if="data.individualShow" size="mini"
                      style="color: #f56c6c;" type="primary" icon="el-icon-delete" @click.stop="remove(node)">
                    </el-link>
                  </span>
                </div>
              </span>
            </el-tree>
          </div>
        </div>
        <div style="height:40px;"></div>
        <div class="opta-add">
          <el-button type="primary" icon="el-icon-plus" plain  @click="handleAddParent">新增</el-button>
            <el-button  icon="el-icon-close"   plain  @click="handleClose">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    listIndividual,
    addParentIndividual,
    addChildIndividual,
    updateParentIndividual,
    updateChildIndividual,
    delParentIndividual,
    delChildIndividual
  } from "../../api/sort"; //接口
  import {
    getCurrentNode,
    setCurrentNode
  } from "../../utils/sort.js" //js方法
  export default {
    data() {
      return {
        loading: true,
        //物料特性树
        individualTree: [],
        //是否显示编码，修改子特性时不显示
        codeShow: true,
        //按钮状态
        btnChange: "addParentStatus",
        // 表单
        form: {
          code: "",
          name: "",
          status: "0"
        },
        //树形节点
        treeNode: "",
        // 是否高亮
        isIndividualHeight: false,
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        // 表单校验
        rules: {
          code: [{
            required: true,
            trigger: 'blur'

          }],
          name: [{
            required: true,
            trigger: 'blur'

          }],

        }
      }
    },
    props:["individualStatus","inHeight"],
    created() {
      this.getIndividualList()
    },
    methods: {
      // 获取特性物料树数据
      getIndividualList() {
        this.loading = true;
        listIndividual().then(res => {
          if (res.code == 200) {
            this.loading = false;
            this.individualTree = res.rows;
          }
        })
      },

      // 特性选中
      nodeClick() {
        this.isIndividualHeight = false;
        this.codeShow = true;
        this.reset()
      },

      // 新增特性父类
      handleAddParent() {
        this.btnChange = 'addParentStatus';
        this.codeShow = true;
         this.isIndividualHeight = false;
        this.reset();
      },

      // 新增特性子类
      handleAddChild(node) {
        this.btnChange = 'addChildStatus';
        this.uplateAdd(node);
        this.treeNode = node; //节点赋值，用来确定添加位置
        this.codeShow = false
        this.reset();
        this.form.code = node.data.code;
      },

      // 状态选择框
      statusChange(value) {
        this.form.status = value;
      },

      // 修改特性
      updateIndividual(node) {
        console.log(node)
         this.$refs.form.resetFields()
        this.uplateAdd(node);
        this.treeNode = node; //节点赋值，用来确定位置
        if (node.data.children == undefined) {
          this.btnChange = 'updateChildStatus';
          this.codeShow = false
        } else {
           this.btnChange = 'updateParentStatus';
          this.codeShow = true
        }
        this.form.uniqueId = node.data.uniqueId;
        this.form.code = node.data.code;
        this.form.name = node.data.name;
        this.form.status = node.data.status;
      },


      // 移除特性
      remove(node) {
          this.$confirm('确认删除', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            if (node.data.children == undefined) {
               return  delChildIndividual(node.data.uniqueId);
            } else {
                return delParentIndividual(node.data.code);
            }
          }).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("删除成功");
              this.reset(); //重置表单
              this.isIndividualHeight = false;
              this.butChange = 'addParentStatus'; //按钮状态为添加
              this.$refs.individualTree.remove(node) //移除节点
            }

          })
      },

      // 修改分类新增分类公共方法
      uplateAdd(node) {
        this.isIndividualHeight = true; // 上级分类高亮
        const getNode = [];
        getCurrentNode(node, getNode).then(currentNode => {
          setCurrentNode(this.$refs.individualTree.root, currentNode)
        })

      },

      //鼠标进入事件
      mouseenter(data) {
        this.$set(data, "individualShow", true);
      },

      //鼠标离开事件
      mouseleave(data) {
        this.$set(data, "individualShow", false);
      },

      //提交表单
      submitFrom(form, node) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.btnChange == "addParentStatus") { //触发新增提交

              addParentIndividual(this.form).then(res => {
                if (res.code == 200) {
                  this.msgSuccess("新增成功");
                  this.individualTree.push(res.data)
                  console.log( this.individualTree)
                  this.reset(); //重置表单
                }
              }).catch(err => {
                this.msgError("新增失败");
              })
            } else if (this.btnChange == "addChildStatus") {
              addChildIndividual(this.form).then(res => {
                if (res.code == 200) {
                  this.msgSuccess("新增成功");
                 node.expand();
                   // console.log(res.data)
                   this.$refs.individualTree.append(res.data, node) //不刷新更新节点数据
                 }
                  this.reset(); //重置表单
              }).catch(err => {
                this.msgError("新增失败");
              })

            }else if(this.btnChange == "updateParentStatus"){
              updateParentIndividual(this.form).then(res => { //触发保存提交
                if (res.code == 200) {
                  this.msgSuccess("保存成功");
                  node.data.code = this.form.code;
                  node.data.name = this.form.name;
                  node.data.uniqueId  = this.form.uniqueId;
                  node.data.status = this.form.status;
                }
              }).catch(err => {
                this.msgError("保存失败");
              })
            }else if(this.btnChange == "updateChildStatus"){
                  updateChildIndividual(this.form).then(res => { //触发保存提交
                    if (res.code == 200) {
                      this.msgSuccess("保存成功");
                      node.data.code = this.form.code;
                      node.data.name = this.form.name;
                      node.data.uniqueId  = this.form.uniqueId;
                      node.data.status = this.form.status;
                    }

                  }).catch(err => {
                    this.msgError("保存失败");
                  })
            }
          }
        });
      },

      //重置
      reset() {
        this.form.uniqueId = "";
        if(this.btnChange !== "addChildStatus"){
           this.form.code = "";
        }
        this.form.name = "";
        this.form.status = "0";
      },
      handleClose(){
         this.$emit("update:individualStatus", false)
      }
    },
    filters: {
      filStatus(status) {
        switch (status) {
          case "0":
            return "正常"
            break;
          case "1":
            return "停用"
            break;
          default:
            return "正常"
        }
      }
    },


  }
</script>

<style lang="scss">
  .outer-box {
    .individual-opta {
      display: flex;
      align-items: center;
      .opta-form {
        display: flex;
        align-items: center;
        .el-form {
          display: flex;
          align-items: center;
          .el-form-item {
            margin-right: 10px;
            margin-bottom: 0;
          }
        }
        .el-input {
          font-size: 13px;
        }
        .el-input__inner {
          height: 32px;
          line-height: 32px;
          font-size: 13px;
          border-radius: 4px;
        }
        .el-form-item__content {
          line-height: 32px;
        }
      }
    }

    .sort-content {
      position: relative;
      .opta-add {
        position: absolute;
        bottom: 30px;
        right: 34px;
        button{
          font-size: 13px;
          padding: 8px 12px;
        }
      }
    }

   .individual-tree {
     width:100%;
   }

    .height-tree {
      overflow: auto;
    }

  }



  .custom-tree-node {
    font-size: 14px;

    a {
      margin-left: 10px;

      &:hover i {
        font-weight: 700;

      }
    }

    .el-link.is-underline:hover:after {
      border: none !important;

    }
  }

  .chang-mourse {
    display: flex;
    justify-content: space-between;

    .mou-r {
      margin-right: 10px;
    }
  }


</style>
